<template>
  <div :class="real_them">
    <MenuVue />
    <div class="bg" v-if="this.edit">
      <div class="edit">
        <div class="header">
          <el-button class="releasebtn" @click="edits" type="primary">取消</el-button>
          分享新鲜事
          <el-button class="releasebtn" @click="send" type="primary">发布</el-button>
        </div>
        <div>
          <div class="title" style="width: 80%; margin-left: 10%; margin-top: 20px">
            这好像是标题：
            <el-input
              type="text"
              placeholder="请输入标题..."
              v-model="title"
              maxlength="10"
              show-word-limit
            >
            </el-input>
          </div>
          <div class="content" style="width: 80%; margin-left: 10%; margin-top: 30px">
            那这里应该是内容：
            <el-input
              type="textarea"
              placeholder="说点什么吧..."
              v-model="textarea"
              maxlength="100"
              show-word-limit
            >
            </el-input>
          </div>
          <div class="labeltag" style="width: 80%; margin-left: 10%; margin-top: 30px">
            总得加上标签吧(手动输入或选择标签，最多三个哦：)<br />
            <el-select
            :popper-append-to-body="false"
              style="width: 60%"
              v-model="value"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择标签"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div @click="closeLogin" class="main">
      <Dynamic_listVue
        :dynamics="this.$store.state.dynamics"
        class="blog_context"
      />
      <!-- 动态一栏放两个 -->
      <div style="position: fixed; bottom: 5px; right: 30px">
        <el-button class="releasebtn" @click="edits" type="primary">发布动态</el-button>
      </div>
    </div>
    <Form />
  </div>
</template>

<script>
import Dynamic_listVue from "../components/Dynamic_list.vue";
import MenuVue from "../components/Menu.vue";
import Form from "../re_components/Form.vue";
import sendDynamic from '../api/sendDynamic'
export default {
  name: "Dynamic_condition",
  components: { Dynamic_listVue, MenuVue, Form },
  data() {
    return {
      edit: false,
      them: "contain",
      title: "",
      textarea: "",
      options: [
        {
          value: "前端",
          label: "前端",
        },
        {
          value: "后端",
          label: "后端",
        },
        {
          value: "原创",
          label: "原创",
        },
        {
          value: "吐槽",
          label: "吐槽",
        },
      ],
      midvalue: [],
    };
  },
  computed: {
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return this.them + " " + m;
    },
    value: {
      get() {
        return this.midvalue;
      },
      set(val) {
        if (val.length <= 3) this.midvalue = val;
        else {
          this.$message({
            message: "标签最多三条哦",
            type: "warning",
          });
        }
      },
    },
  },
  methods: {
    edits() {
      this.edit = !this.edit;
    },
    closeLogin() {
      this.$store.commit("changeshow", false);
    },
    handleTag(val){
      let tag = []
      for(let i = 0 ; i < val.length ; i++){
        tag.push([val[i]])
      }
      return tag
    },
    send() {
      if (!this.$store.state.islogin) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }
      if (this.title && this.textarea && this.midvalue.length !== 0) {
        let params = new URLSearchParams();
        params.append("userid", this.$store.state.infomation.id);
        params.append("title", this.title);
        params.append("context", this.textarea);
        params.append("tag", this.handleTag(this.midvalue));
        console.log(this.handleTag(this.midvalue) )
        sendDynamic(params).then(
          res => {
            console.log(res)
          }
        )
      } else {
        this.$message({
          message: "请将信息填写完毕并至少选择1个标签",
          type: "error",
        });
      }
    },
  },
  mounted(){
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"))
    if (userinfo) {
      this.$store.commit("tologin", true);
      this.$store.commit("addInfomation", userinfo);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../main.less";

.light {
  background-color: @bg_gray;
  transition: all 1s;

  /deep/ .releasebtn{
    background-color: @bt_deep_light;
    transition: all 1s;
  }

  .title /deep/ .el-input__inner{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }
  .title /deep/.el-input__count-inner{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }

  .content /deep/ .el-textarea__inner{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }
  .content /deep/ .el-input__count{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }

  .labeltag /deep/ .el-select__input{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }
  .labeltag /deep/ .el-scrollbar__view{
    background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }
  .labeltag /deep/ .el-input__inner{
    background-color:@bg_light_contain;
          color:  @fs_light_contain;
          transition: all 1s;
  }
  .labeltag /deep/ .el-tag{
    background-color:@bg_light_contain;
          color:  @fs_light_contain;
          transition: all 1s;
  }
  



  .labeltag /deep/ .el-select-dropdown__item{
    background-color:@bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }

   /deep/ .el-select-dropdown .el-scrollbar{
    background-color:@bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }

  /deep/ .el-select-dropdown__item.selected.hover {
    background-color:@bg_light_contain;

}
    /deep/  .hover{
    background-color:@bg_light_contain;
    color:  @fs_light_contain;
    transition: all 1s;
  }
   /deep/ li .selected{
    background-color:@bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
  }
  
    .edit{
      background-color: @bg_light_contain;
          color: @fs_light_contain;
          transition: all 1s;
    }


  .menu {
    background-color: @bg_light_contain;
    color: @fs_light_contain;
    transition: all 1s;
  }

  .main {
    .blog_list {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }

    .blog_context {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }

    .blog_tools {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }
  }
}

.dark {
  background-color: @bg_dark;
  transition: all 1s;

  /deep/ .releasebtn{
    background-color: @bt_deep_dark;
    transition: all 1s;
  }
  .title /deep/ .el-input__inner{
    background-color: @bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }

  .title /deep/.el-input__count-inner{
    background-color: @bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }

  .content /deep/ .el-textarea__inner{
    background-color: @bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }
  .content /deep/ .el-input__count{
    background-color:@bg_dark_contain;
          color:  @fs_dark_contain;
          transition: all 1s;
  }

  .labeltag /deep/ .el-select__input{
    background-color:@bg_dark_contain;
          color:  @fs_dark_contain;
          transition: all 1s;
  }
  .labeltag /deep/ .el-input__inner{
    background-color:@bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }
  .labeltag /deep/ .el-tag{
    background-color:@bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }

  .labeltag /deep/ .el-select-dropdown__item{
    background-color:@bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }

   /deep/ .el-select-dropdown .el-scrollbar{
    background-color:@bg_dark_contain;
          color: @fs_dark_contain;
          transition: all 1s;
  }

  /deep/ .el-select-dropdown__item.selected.hover {
    background-color:@bg_dark;

}
    /deep/  .hover{
    background-color:@bg_dark;
    color:  @fs_dark_contain;
    transition: all 1s;
  }
   /deep/ li .selected{
    background-color:@bg_dark;
          color:  @fs_dark_contain;
          transition: all 1s;
  }


    .edit{
      background-color:@bg_dark_contain;
          color:  @fs_dark_contain;
          transition: all 1s;
    }

  .menu {
    background-color: @bg_dark_contain;
    color: @fs_dark_contain;
    transition: all 1s;
  }

  .main {
    .blog_list {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }

    .blog_context {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }

    .blog_tools {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }
  }
}

.contain {
  // 博客是单屏页面
  height: 100%;
  width: 100%;
  position: relative;

  .main {
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
  }
}

@media screen and (min-width: 1300px) {
  /* 大于1200px时 */
  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        width: 1200px;
        height: 100%;
        margin-left: 16px;
      }
    }
  }
}

@media screen and (min-width: 800px) and (max-width: 1300px) {
  /* 小于800px时 */

  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        width: 950px;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  /* 小于800px时 */

  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        flex-grow: 1;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 54px;
  left: 0;
  z-index: 100;
  width: 100%;
  height: calc(100% - 54px);
  background-color: rgba(0, 0, 0, 0.5);
}

.edit {
  background-color: white;
  width: 900px;
  height: 70%;
  margin-left: 16px;
  border-radius: 20px;
}

.header {
  margin: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>